<template>
	<view class="">
		<view class="item"  @click="jump">
			<view class="img_view">
				<image class="item_img" mode="aspectFit"  :src="sheep.$url.cdn(data.logo)"></image>
			</view>
			<view class="item_main">
				<view class="main_left">
					<view class="title single-line-ellipsis">{{data.name}}</view>
					<view class="labels ">
						<view class="label" v-for="(it,ind) in data.category_text">{{it}}</view>
					</view>
					<view class="rate" v-if="data.score>0">
						<template v-for="n in data.score" :key="n">
							<image class="icon" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281333225452.png"></image>
						</template>
						
						<template v-if="data.num>0">
							<image v-for="m in data.num" :key="m" class="icon" src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage_2/storage/qt/202405281334123510.png"></image>
						</template>
						
						<view class="recommend">{{data.score}}</view>
					</view>
					<view class="rate" v-else>
						暂无评分
					</view>
					<view class="address two-line">{{data.position}}</view>
				</view>
				<view class="main_right ">
					<view>{{categoryName}}</view>
					<view class="ss-m-t-16">{{data.distance.format_distance}}</view>
				</view>
			</view>
		</view>
	</view>
	
	
</template>

<script setup>
	import {
			computed,
			reactive,
			onBeforeMount,
			ref
	} from 'vue';
	
	import sheep from '@/sheep';
	import _ from 'lodash'
	
	const emits = defineEmits(['itemClick'])
	
	const props = defineProps({
		data:{
			type:Object,
			default:{},
		},
		categoryName:{
			type:String,
			default:'',
		}
	})
	
	const jump=()=>{
		emits('itemClick',{id:data.id});
	}
	
	
</script>

<style lang="scss" scoped>
.item{
	border-radius: 32rpx;
	display: flex;
	justify-content: space-between;
	padding:20rpx;
	margin-left: 16rpx;
	margin-right: 16rpx;
	margin-bottom: 16rpx;
	background: #fff;
	// height:240rpx;
	// width:calc(100% - 32rpx);
	.img_view{
		width:200rpx;
		height:200rpx;
		
		margin-left: 12rpx;
		.item_img{
			border-radius: 10rpx;
			width:200rpx;
			height:200rpx;
		}
	}
	
	.item_main{
		font-family: PingFang SC;
	
		margin-left: 16rpx;
		display: flex;
		justify-content: space-between;

		.main_left{
			width: 300rpx;
			.title{
				font-size: 28rpx;
				font-weight: 700;
				line-height: normal;
				letter-spacing: -0.1rpx;
			}
			
			.labels {
			    display: flex;
				justify-content: flex-start;
				margin-top: 10rpx;
			    flex-wrap: wrap; /* 允许换行 */
			    .label {
			        width: auto; /* 根据内容自适应宽度 */
			        margin-right: 6rpx;
			        margin-bottom: 6rpx; /* 增加底部间距，避免标签堆叠在一起 */
			        padding: 6rpx 4rpx;
			        border: 1rpx solid #47DFBD;
			        border-radius: 10rpx;
			        display: flex;
			        justify-content: center;
			        align-items: center;
			        font-size: 20rpx;
			        font-weight: 400;
			    }
			}
			.rate{
				height:40rpx;
				
				display: flex;
				justify-content: flex-start;
				.icon{
					width:30rpx;
					height:30rpx;
				}
				.recommend{
					font-weight: 400;
					font-size: 30rpx;
					color:#FF6F6F;
				}
			}
			.address{
				font-size: 20rpx;
				font-weight: normal;
				line-height: 36rpx;
				color: #767676;
				width:280rpx;
			}
		}
		.main_right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-right: 8rpx;
			width:150rpx;
			height:100%;
			font-size: 28rpx;
			font-weight: 400;
			line-height: normal;
			letter-spacing: 1rpx;
			color:#767676;
		}
		
	}
}


.two-line{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;

}

.single-line-ellipsis {
    white-space: nowrap;        /* 防止文本换行 */
    overflow: hidden;           /* 隐藏溢出部分 */
    text-overflow: ellipsis;    /* 在溢出时显示省略号 */
    width: 300rpx;               /* 设置宽度以便看到效果 */
}

</style>
